/**
 * 404页面组件
 * 
 * 功能说明：
 * - 显示页面未找到提示
 * - 提供返回首页的按钮
 * - 友好的错误页面设计
 * 
 * 设计特点：
 * - 响应式布局，根据用户认证状态调整边距
 * - 垂直和水平居中的内容布局
 * - 使用Ant Design的Result组件提供专业的错误展示
 */

import React from 'react'
import { Result, Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useAuthStore } from '@stores/auth'

/**
 * 404页面组件
 * 
 * @returns {JSX.Element} 404错误页面元素
 */
function NotFoundPage() {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate()
  // 获取用户认证状态，用于调整布局边距
  const { isAuthenticated } = useAuthStore()

  return (
    <div style={{ 
      // 顶部边距，避开固定导航栏
      marginTop: 64, 
      // 左侧边距，根据用户是否认证（是否显示侧边栏）动态调整
      marginLeft: isAuthenticated ? 200 : 0, 
      // 最小高度，确保内容区域至少占满剩余视口高度
      minHeight: 'calc(100vh - 64px)',
      // 使用Flex布局实现内容垂直居中
      display: 'flex',
      alignItems: 'center',
      // 使用Flex布局实现内容水平居中
      justifyContent: 'center'
    }}>
      <Result
        // 设置状态码为404
        status="404"
        // 主标题
        title="404"
        // 副标题，提供友好的错误说明
        subTitle="抱歉，您访问的页面不存在"
        // 额外操作区域
        extra={
          <Button 
            // 设置为主要按钮样式
            type="primary" 
            // 点击按钮时导航到首页
            onClick={() => navigate('/')}
            // 设置按钮圆角
            style={{ borderRadius: 20 }}
          >
            返回首页
          </Button>
        }
      />
    </div>
  )
}

export default NotFoundPage 